<template>
  <div class="login-container">
    <!-- 欢迎动画模态框 -->
    <div class="welcome-modal" :class="{ 'show': showWelcome }">
      <div class="modal-content">
        <div class="crown-icon">
          <el-icon size="48"><Star /></el-icon>
        </div>
        <h2 class="welcome-title">欢迎使用</h2>
        <h1 class="system-title">Cyan-Note 管理系统</h1>
        <p class="welcome-subtitle">专业陪玩服务订单管理平台</p>
        <div class="loading-dots">
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>
    </div>

    <!-- 登录主内容 -->
    <div class="login-main" :class="{ 'fade-in': !showWelcome }">
      <!-- 背景装饰元素 -->
      <div class="bg-decorations">
        <div class="decoration decoration-1"></div>
        <div class="decoration decoration-2"></div>
        <div class="decoration decoration-3"></div>
      </div>

      <!-- 左侧品牌区域 -->
      <div class="brand-section">
        <div class="brand-content">
          <div class="logo-container">
            <div class="logo-icon">
              <el-icon size="80"><Monitor /></el-icon>
            </div>
            <h1 class="brand-title">Cyan-Note</h1>
            <p class="brand-subtitle">陪玩订单管理系统</p>
          </div>
          
          <div class="brand-features">
            <div class="feature-item">
              <el-icon size="24"><User /></el-icon>
              <span>多角色权限管理</span>
            </div>
            <div class="feature-item">
              <el-icon size="24"><DocumentCopy /></el-icon>
              <span>智能订单分配</span>
            </div>
            <div class="feature-item">
              <el-icon size="24"><PieChart /></el-icon>
              <span>实时数据分析</span>
            </div>
            <div class="feature-item">
              <el-icon size="24"><Setting /></el-icon>
              <span>严格数据隔离</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧登录表单区域 -->
      <div class="form-section">
        <div class="form-container">
          <!-- 登录表单卡片 -->
          <div class="login-card">
            <div class="card-header">
              <h2 class="login-title">系统登录</h2>
              <p class="login-subtitle">请使用您的账户登录系统</p>
            </div>

            <div class="card-content">
              <el-form 
                ref="loginFormRef"
                :model="loginForm"
                :rules="loginRules"
                class="login-form"
                size="large"
                status-icon
                @submit.prevent="handleLogin"
              >
                <!-- 用户名输入框 -->
                <el-form-item prop="username" class="form-item">
                  <div class="input-label">
                    <el-icon><User /></el-icon>
                    <span>用户名</span>
                  </div>
                  <el-input
                    v-model="loginForm.username"
                    placeholder="请输入用户名"
                    autocomplete="username"
                    :prefix-icon="User"
                    clearable
                    @keyup.enter="handleLogin"
                  />
                </el-form-item>

                <!-- 密码输入框 -->
                <el-form-item prop="password" class="form-item">
                  <div class="input-label">
                    <el-icon><Lock /></el-icon>
                    <span>密码</span>
                  </div>
                  <el-input
                    v-model="loginForm.password"
                    type="password"
                    placeholder="请输入密码"
                    autocomplete="current-password"
                    :prefix-icon="Lock"
                    show-password
                    clearable
                    @keyup.enter="handleLogin"
                  />
                </el-form-item>

                <!-- 记住密码 -->
                <el-form-item class="form-options">
                  <div class="options-content">
                    <el-checkbox v-model="loginForm.rememberMe">
                      记住密码
                    </el-checkbox>
                    <el-link type="primary" :underline="false" class="forgot-password">
                      忘记密码？
                    </el-link>
                  </div>
                </el-form-item>

                <!-- 登录按钮 -->
                <el-form-item class="form-submit">
                  <el-button
                    type="primary"
                    size="large"
                    class="login-button"
                    :loading="loading"
                    :disabled="loading"
                    @click="handleLogin"
                    round
                  >
                    <template v-if="!loading">
                      <el-icon class="login-icon"><Right /></el-icon>
                      <span>{{ loading ? '登录中...' : '登 录' }}</span>
                    </template>
                    <template v-else>
                      <span>登录中...</span>
                    </template>
                  </el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>

          <!-- 角色说明 -->
          <div class="role-tips">
            <div class="tips-header">
              <el-icon size="16"><InfoFilled /></el-icon>
              <span>登录角色说明</span>
            </div>
            <div class="role-list">
              <div class="role-item">
                <el-tag type="success" size="small">超级管理员</el-tag>
                <span>系统管理、店铺创建</span>
              </div>
              <div class="role-item">
                <el-tag type="primary" size="small">店长</el-tag>
                <span>订单管理、打手管理、财务管理</span>
              </div>
              <div class="role-item">
                <el-tag type="info" size="small">打手</el-tag>
                <span>接单、完成订单</span>
              </div>
            </div>
          </div>

          <!-- 测试账号提示 -->
          <div class="test-accounts" v-if="isDevelopment">
            <div class="tips-header">
              <el-icon size="16"><Key /></el-icon>
              <span>测试账号</span>
            </div>
            <div class="account-list">
              <div class="account-item" @click="fillTestAccount('admin')">
                <span class="username">admin</span>
                <span class="password">admin123</span>
                <span class="role">超级管理员</span>
              </div>
              <div class="account-item" @click="fillTestAccount('manager001')">
                <span class="username">manager001</span>
                <span class="password">manager123</span>
                <span class="role">店长</span>
              </div>
              <div class="account-item" @click="fillTestAccount('worker001')">
                <span class="username">worker001</span>
                <span class="password">worker123</span>
                <span class="role">打手</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted, nextTick } from 'vue'
import { ElMessage, ElNotification, type FormInstance, type FormRules } from 'element-plus'
import { 
  User, 
  Lock, 
  Right, 
  Star,
  Monitor,
  DocumentCopy,
  PieChart,
  Setting,
  InfoFilled,
  Key
} from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@renderer/store/modules/auth'
import { login, type LoginParams } from '@renderer/api/login'

// 路由实例和状态管理
const router = useRouter()
const authStore = useAuthStore()

// 表单引用
const loginFormRef = ref<FormInstance>()

// 响应式数据
const showWelcome = ref<boolean>(true)
const loading = ref<boolean>(false)
const isDevelopment = ref<boolean>(import.meta.env.DEV || false)

// 登录表单数据类型
interface LoginFormData {
  username: string
  password: string
  rememberMe: boolean
}

// 登录表单数据
const loginForm = reactive<LoginFormData>({
  username: '',
  password: '',
  rememberMe: false
})

// 表单验证规则
const loginRules: FormRules<LoginFormData> = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 2, max: 50, message: '用户名长度在 2 到 50 个字符', trigger: 'blur' },
    { pattern: /^[a-zA-Z0-9_]+$/, message: '用户名只能包含字母、数字和下划线', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' },
    { 
      validator: (_rule: any, value: any, callback: any) => {
        if (!value) {
          callback()
          return
        }
        
        // 密码强度验证
        const hasLetter = /[a-zA-Z]/.test(value)
        const hasNumber = /\d/.test(value)
        
        if (!hasLetter || !hasNumber) {
          callback(new Error('密码必须包含字母和数字'))
          return
        }
        
        callback()
      }, 
      trigger: 'blur' 
    }
  ]
}

// 组件挂载
onMounted(() => {
  // 3秒后隐藏欢迎动画
  setTimeout(() => {
    showWelcome.value = false
  }, 3000)
  
  // 检查记住的密码
  loadRememberedCredentials()
  
  // 添加全局快捷键监听
  document.addEventListener('keydown', handleGlobalKeydown)
})

// 组件卸载时移除监听器
onUnmounted(() => {
  document.removeEventListener('keydown', handleGlobalKeydown)
})

// 全局键盘事件处理
const handleGlobalKeydown = (event: KeyboardEvent) => {
  // Ctrl+Enter 快速登录
  if ((event.ctrlKey || event.metaKey) && event.key === 'Enter') {
    event.preventDefault()
    handleLogin()
    return
  }
  
  // ESC 清空表单
  if (event.key === 'Escape') {
    event.preventDefault()
    clearForm()
    return
  }
  
  // 开发环境下的快捷键
  if (isDevelopment.value) {
    // F1-F3 快速填充测试账号
    if (event.key === 'F1') {
      event.preventDefault()
      fillTestAccount('admin')
      return
    }
    if (event.key === 'F2') {
      event.preventDefault()
      fillTestAccount('manager001')
      return
    }
    if (event.key === 'F3') {
      event.preventDefault()
      fillTestAccount('worker001')
      return
    }
  }
}

// 清空表单
const clearForm = () => {
  loginForm.username = ''
  loginForm.password = ''
  loginForm.rememberMe = false
  
  // 清除表单验证状态
  nextTick(() => {
    if (loginFormRef.value) {
      loginFormRef.value.clearValidate()
    }
  })
  
  ElMessage({
    type: 'info',
    message: '表单已清空',
    duration: 2000
  })
}

// 加载记住的凭据
const loadRememberedCredentials = () => {
  try {
    const rememberedUsername = localStorage.getItem('rememberedUsername')
    const rememberedPassword = localStorage.getItem('rememberedPassword')
    
    if (rememberedUsername && rememberedPassword) {
      loginForm.username = rememberedUsername
      loginForm.password = rememberedPassword
      loginForm.rememberMe = true
      
      console.log('已加载记住的登录凭据')
    }
  } catch (error) {
    console.error('加载记住的凭据失败:', error)
  }
}

// 测试账号类型
type AccountType = 'admin' | 'manager001' | 'worker001'

// 填充测试账号
const fillTestAccount = (type: AccountType) => {
  const accounts: Record<AccountType, { username: string; password: string }> = {
    admin: { username: 'admin', password: 'admin123' },
    manager001: { username: 'manager001', password: 'manager123' },
    worker001: { username: 'worker001', password: 'worker123' }
  }
  
  const account = accounts[type]
  if (account) {
    loginForm.username = account.username
    loginForm.password = account.password
    
    ElMessage({
      type: 'success',
      message: `已填充${type}测试账号`,
      duration: 2000
    })
  }
}

// 登录处理
const handleLogin = async () => {
  if (!loginFormRef.value) return
  
  try {
    // 表单验证
    await loginFormRef.value.validate()
    
    loading.value = true
    
    console.log('开始登录请求:', { username: loginForm.username })
    
    // 记住密码功能
    if (loginForm.rememberMe) {
      localStorage.setItem('rememberedUsername', loginForm.username)
      localStorage.setItem('rememberedPassword', loginForm.password)
    } else {
      localStorage.removeItem('rememberedUsername')
      localStorage.removeItem('rememberedPassword')
    }
    
    // 使用AuthStore进行登录
    const redirectPath = await authStore.login({
      username: loginForm.username,
      password: loginForm.password
    })
    
    // 登录成功通知
    ElNotification({
      title: '登录成功',
      message: `欢迎回来，${authStore.userName}！`,
      type: 'success',
      duration: 3000,
      position: 'top-right'
    })
    
    console.log('登录成功:', {
      userType: authStore.userType,
      userName: authStore.userName,
      redirectPath,
      permissions: authStore.permissions.length
    })
    
    // 延迟跳转，让用户看到成功提示
    setTimeout(() => {
      router.push(redirectPath)
    }, 1000)
    
  } catch (error: any) {
    console.error('登录失败:', error)
    
    let errorMessage = '登录失败，请检查用户名和密码'
    
    // 根据错误类型显示不同消息
    if (error.response) {
      switch (error.response.status) {
        case 401:
          errorMessage = '用户名或密码错误'
          break
        case 403:
          errorMessage = '账户已被禁用，请联系管理员'
          break
        case 429:
          errorMessage = '登录尝试过于频繁，请稍后再试'
          break
        case 500:
          errorMessage = '服务器错误，请稍后重试'
          break
        default:
          if (error.response.data?.message) {
            errorMessage = error.response.data.message
          }
      }
    } else if (error.message) {
      if (error.message.includes('timeout')) {
        errorMessage = '连接超时，请检查网络连接'
      } else if (error.message.includes('Network Error')) {
        errorMessage = '网络连接失败，请检查网络设置'
      } else {
        errorMessage = error.message
      }
    }
    
    ElMessage({
      type: 'error',
      message: errorMessage,
      duration: 4000
    })
    
    // 登录失败时震动提示 (如果支持)
    if ('vibrate' in navigator && typeof navigator.vibrate === 'function') {
      navigator.vibrate(200)
    }
    
  } finally {
    loading.value = false
  }
}

// 用户类型定义
type UserType = 'super_admin' | 'manager' | 'worker'

// 根据用户名判断用户类型 (临时逻辑)
const getUserTypeFromUsername = (username: string): UserType => {
  if (username === 'admin') return 'super_admin'
  if (username.startsWith('manager')) return 'manager'
  if (username.startsWith('worker')) return 'worker'
  return 'manager' // 默认店长
}

// 根据用户类型获取重定向路径
const getRedirectPath = (userType: UserType): string => {
  const pathMap: Record<UserType, string> = {
    'super_admin': '/admin/dashboard',
    'manager': '/manager/dashboard',
    'worker': '/worker/orders'
  }
  return pathMap[userType] || '/manager/dashboard'
}

console.log('登录页面已加载')
</script>

<style scoped lang="scss">
// 变量定义
$primary-color: #4ECDC4;
$primary-hover: #45B8B0;
$success-color: #27AE60;
$warning-color: #F39C12;
$danger-color: #E74C3C;
$info-color: #3498DB;
$text-primary: rgba(255, 255, 255, 0.95);
$text-secondary: rgba(255, 255, 255, 0.8);
$text-tertiary: rgba(255, 255, 255, 0.6);

// 主容器
.login-container {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

// 欢迎动画模态框
.welcome-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.6s ease;
  
  &.show {
    opacity: 1;
    visibility: visible;
  }
  
  .modal-content {
    text-align: center;
    animation: modal-bounce 0.8s ease-out;
    
    .crown-icon {
      margin-bottom: 20px;
      color: #FFD700;
      animation: crown-glow 2s ease-in-out infinite alternate;
    }
    
    .welcome-title {
      font-size: 20px;
      font-weight: 600;
      color: $text-secondary;
      margin: 0 0 8px 0;
    }
    
    .system-title {
      font-size: 36px;
      font-weight: 800;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin: 0 0 12px 0;
      text-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
    }
    
    .welcome-subtitle {
      font-size: 16px;
      color: $text-tertiary;
      margin: 0 0 40px 0;
    }
    
    .loading-dots {
      display: flex;
      justify-content: center;
      gap: 8px;
      
      span {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: $primary-color;
        animation: loading-bounce 1.4s ease-in-out infinite both;
        
        &:nth-child(1) { animation-delay: -0.32s; }
        &:nth-child(2) { animation-delay: -0.16s; }
        &:nth-child(3) { animation-delay: 0s; }
      }
    }
  }
}

// 登录主内容
.login-main {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s ease;
  
  &.fade-in {
    opacity: 1;
    transform: translateY(0);
  }
}

// 背景装饰元素
.bg-decorations {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  
  .decoration {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.3;
    animation: float-decoration 10s ease-in-out infinite;
    
    &.decoration-1 {
      top: 10%;
      left: 10%;
      width: 200px;
      height: 200px;
      background: radial-gradient(circle, rgba(78, 205, 196, 0.4) 0%, transparent 70%);
      animation-delay: 0s;
    }
    
    &.decoration-2 {
      top: 60%;
      right: 15%;
      width: 150px;
      height: 150px;
      background: radial-gradient(circle, rgba(243, 156, 18, 0.4) 0%, transparent 70%);
      animation-delay: -3s;
    }
    
    &.decoration-3 {
      bottom: 20%;
      left: 20%;
      width: 180px;
      height: 180px;
      background: radial-gradient(circle, rgba(52, 152, 219, 0.4) 0%, transparent 70%);
      animation-delay: -6s;
    }
  }
}

// 左侧品牌区域
.brand-section {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
  position: relative;
  z-index: 1;
  
  .brand-content {
    max-width: 500px;
    text-align: center;
    
    .logo-container {
      margin-bottom: 60px;
      
      .logo-icon {
        margin-bottom: 24px;
        color: $primary-color;
        animation: logo-pulse 3s ease-in-out infinite;
      }
      
      .brand-title {
        font-size: 48px;
        font-weight: 800;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin: 0 0 16px 0;
        text-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
      }
      
      .brand-subtitle {
        font-size: 18px;
        color: $text-secondary;
        margin: 0;
      }
    }
    
    .brand-features {
      .feature-item {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: 16px 0;
        font-size: 16px;
        color: $text-secondary;
        transition: all 0.3s ease;
        border-radius: 12px;
        margin-bottom: 8px;
        
        &:hover {
          color: $text-primary;
          background: rgba(255, 255, 255, 0.05);
          transform: translateX(8px);
        }
        
        .el-icon {
          color: $primary-color;
        }
      }
    }
  }
}

// 右侧表单区域
.form-section {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  position: relative;
  z-index: 1;
}

.form-container {
  width: 100%;
  max-width: 420px;
}

// 登录卡片
.login-card {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 24px;
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.2),
    0 0 60px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  overflow: hidden;
  
  .card-header {
    padding: 40px 40px 20px;
    text-align: center;
    
    .login-title {
      font-size: 28px;
      font-weight: 700;
      color: $text-primary;
      margin: 0 0 12px 0;
    }
    
    .login-subtitle {
      font-size: 14px;
      color: $text-secondary;
      margin: 0;
    }
  }
  
  .card-content {
    padding: 20px 40px 40px;
  }
}

// 表单样式
.login-form {
  .form-item {
    margin-bottom: 24px;
    
    .input-label {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
      font-size: 14px;
      font-weight: 600;
      color: $text-secondary;
      
      .el-icon {
        font-size: 16px;
        color: $primary-color;
      }
    }
    
    :deep(.el-input) {
      .el-input__wrapper {
        background: rgba(255, 255, 255, 0.15);
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 12px;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
        
        &:hover {
          background: rgba(255, 255, 255, 0.2);
          border-color: rgba(255, 255, 255, 0.4);
        }
        
        &.is-focus {
          background: rgba(255, 255, 255, 0.25);
          border-color: $primary-color;
          box-shadow: 
            inset 0 1px 3px rgba(0, 0, 0, 0.1),
            0 0 0 2px rgba(78, 205, 196, 0.2);
        }
      }
      
      .el-input__inner {
        color: $text-primary;
        
        &::placeholder {
          color: $text-tertiary;
        }
      }
    }
  }
  
  .form-options {
    margin-bottom: 32px;
    
    .options-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      :deep(.el-checkbox) {
        .el-checkbox__label {
          color: $text-secondary;
          font-size: 14px;
        }
        
        .el-checkbox__input.is-checked .el-checkbox__inner {
          background-color: $primary-color;
          border-color: $primary-color;
        }
      }
      
      .forgot-password {
        font-size: 14px;
        color: $primary-color;
        
        &:hover {
          color: $primary-hover;
        }
      }
    }
  }
  
  .form-submit {
    margin-bottom: 0;
    
    .login-button {
      width: 100%;
      height: 50px;
      background: linear-gradient(135deg, $primary-color 0%, $primary-hover 100%);
      border: none;
      border-radius: 25px;
      font-size: 16px;
      font-weight: 600;
      color: white;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
      
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: all 0.5s;
      }
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(78, 205, 196, 0.4);
        
        &::before {
          left: 100%;
        }
      }
      
      &:active {
        transform: translateY(0);
      }
      
      .login-icon {
        margin-right: 8px;
        transition: transform 0.3s ease;
      }
      
      &:hover .login-icon {
        transform: translateX(4px);
      }
    }
  }
}

// 角色说明
.role-tips {
  margin-top: 24px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  backdrop-filter: blur(15px);
  
  .tips-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 600;
    color: $text-secondary;
    
    .el-icon {
      color: $info-color;
    }
  }
  
  .role-list {
    .role-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 8px 0;
      font-size: 13px;
      color: $text-tertiary;
      
      .el-tag {
        min-width: 80px;
        text-align: center;
      }
    }
  }
}

// 测试账号
.test-accounts {
  margin-top: 16px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  
  .tips-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 600;
    color: $text-tertiary;
    
    .el-icon {
      color: $warning-color;
    }
  }
  
  .account-list {
    .account-item {
      display: grid;
      grid-template-columns: 1fr 1fr 80px;
      gap: 8px;
      padding: 8px 12px;
      border-radius: 8px;
      font-size: 12px;
      color: $text-tertiary;
      cursor: pointer;
      transition: all 0.2s ease;
      
      &:hover {
        background: rgba(255, 255, 255, 0.1);
        color: $text-secondary;
      }
      
      .username { font-weight: 600; }
      .password { font-family: monospace; }
      .role { text-align: right; font-size: 11px; }
    }
  }
}

// 动画定义
@keyframes modal-bounce {
  0% {
    opacity: 0;
    transform: scale(0.3) translateY(-50px);
  }
  50% {
    opacity: 1;
    transform: scale(1.05) translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes crown-glow {
  0% { filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.3)); }
  100% { filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.8)); }
}

@keyframes loading-bounce {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

@keyframes float-decoration {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
    opacity: 0.3;
  }
  33% {
    transform: translateY(-20px) rotate(120deg);
    opacity: 0.5;
  }
  66% {
    transform: translateY(10px) rotate(240deg);
    opacity: 0.2;
  }
}

@keyframes logo-pulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 10px rgba(78, 205, 196, 0.3));
  }
  50% {
    transform: scale(1.05);
    filter: drop-shadow(0 0 20px rgba(78, 205, 196, 0.6));
  }
}

// 响应式设计
@media (max-width: 1200px) {
  .login-main {
    flex-direction: column;
  }
  
  .brand-section {
    flex: none;
    padding: 40px 40px 20px;
    
    .brand-content {
      .logo-container {
        margin-bottom: 40px;
        
        .brand-title {
          font-size: 36px;
        }
        
        .brand-subtitle {
          font-size: 16px;
        }
      }
      
      .brand-features {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        
        .feature-item {
          padding: 12px;
          font-size: 14px;
          
          &:hover {
            transform: translateX(4px);
          }
        }
      }
    }
  }
  
  .form-section {
    flex: none;
    padding: 20px 40px 40px;
  }
  
  .login-card {
    .card-header, .card-content {
      padding-left: 30px;
      padding-right: 30px;
    }
  }
}

@media (max-width: 768px) {
  .login-container {
    padding: 20px;
  }
  
  .brand-section {
    padding: 20px;
    
    .brand-content {
      .brand-features {
        grid-template-columns: 1fr;
      }
    }
  }
  
  .form-section {
    padding: 20px;
  }
  
  .form-container {
    max-width: 100%;
  }
  
  .login-card {
    .card-header {
      padding: 30px 24px 16px;
      
      .login-title {
        font-size: 24px;
      }
    }
    
    .card-content {
      padding: 16px 24px 30px;
    }
  }
}
</style>